<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        text-align: center;
    }

    ul li {
        width: 150px;
        height: 40px;
        float: left;
        list-style: none;
        line-height: 40px;
        background-color: aqua;
    }
    .nav1 ul li,
    .nav2 ul li,
    .nav3 ul li,
    .nav4 ul li,
    .nav5 ul li{
        display: none;
    }
    .nav1:hover,
    .nav2:hover,
    .nav3:hover,
    .nav4:hover,
    .nav5:hover{
        background: yellow;
    }

    .nav1:hover ul li,
    .nav2:hover ul li,
    .nav3:hover ul li,
    .nav4:hover ul li,
    .nav5:hover ul li{
        display: block;
    }
    /* .nav1:hover,.nav2:hover,.nav3:hover,.nav4:hover,.nav5:hover{
        background: chartreuse;
        display: block;
    } */
</style>

<body>
    <ul>
        <li class="nav1">第一个
            <ul>
                <li>第一个小一</li>
                <li>第一个小二</li>
                <li>第一个小三</li>
            </ul>
        </li>
        <li class="nav2">第二个
            <ul>
                <li>第二个小一</li>
                <li>第二个小二</li>
                <li>第二个小三</li>
            </ul>
        </li>
        <li class="nav3">第三个
            <ul>
                <li>第三个小一</li>
                <li>第三个小二</li>
                <li>第三个小三</li>
            </ul>
        </li>
        <li class="nav4">第四个
            <ul>
                <li>第四个小一</li>
                <li>第四个小二</li>
                <li>第四个小三</li>
            </ul>
        </li>
        <li class="nav5">第五个
            <ul>
                <li>第五个小一</li>
                <li>第五个小二</li>
                <li>第五个小三</li>
            </ul>
        </li>
    </ul>
</body>

</html>